

<template>
    <div class="library-container">
        <div class="library-head">
        </div>
        <div class="library-body">
            <div class="pdf-viewer-bgc">
                <pre class="pdf-viewer">
                {{ pdfText }}
            </pre>
            </div>
            <div class="pdf-tools">
                <button class="pdf-uploader" v-if="!pdfText" @click="uploadPdf">上传文件</button>
                <!-- 隐藏的input用于选择文件 -->
                <input type="file" id="pdfFile" ref="pdfFileInput" @change="trueUploadPdf" accept=".pdf"
                    style="display: none" />
                <div class="tools-up">
                    <div class="tools-up-mycards">我的卡片</div>
                    <div class="tools-up-othercards">社区卡片</div>
                </div>
                <div class="tools-chat">
                    <Card v-for="(card, index) in cards" :key="card.cid" :from="card.from" :title="card.title"
                        :content="card.content"></Card>
                </div>
                <div class="tools-down">
                    <div class="tools-down-input">
                        <input type="text" class="rounded-input" placeholder="向模型提问">
                        <button class="rounded-button">发送</button>
                    </div>
                    <div class="tools-down-other">
                        <button class="other-button">超参</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { get, post } from '@/api';
import axios from 'axios';
import Card from '@/components/Card.vue'
export default {
    name: '',
    components: {
        Card,
    },
    data() {
        return {
            pdfText: `南开大学
圈点阅读产品策划书
作者：   WALL- E Lab; 
指导教师： 王斌辉；
        
目录
一、背景与思考........................................ 4
二、产品设计思路...................................... 5
2.1 阅读辅助与学习管理.................................5
2.1.1 文档管理基础功能.......................................5
2.1.2 内容拓展与知识问答.....................................5
2.1.3 文档互动...............................................6
2.1.4 学习笔记...............................................6
2.2 知识社区.......................................... 7
2.2.1 用户信息管理..........................................7
2.2.2 内容管理..........................................7
2.2.3 网络图书馆..........................................8
2.2.4 读书小组与课程..........................................9
三、创新点说明..........................................10
3.1 产品创作理念..................................... 10
3.1.1 智能的AI 学习帮手..........................................10
3.1.2 基于文档的交互设计..........................................10
3.1.3 富有开源精神的知识社区...........................................10
3.1.4 以书会友，为书友提供互动平台..........................................11
3.2 商业价值.......................................... 11
3.2.1 解决痛点，满足市场需求...........................................11
3.2.2 目标用户群体广泛..........................................11
3.2.3 技术优势带来的竞争优势...........................................11
3.2.4 多元化的盈利模式...........................................11
3.2.5 创新性的产品功能..........................................1
3.3 社会贡献......................................... 11
3.3.1 促进知识共享与传播..........................................12
3
3.3.2 支持教育公平..........................................12
3.3.3 增进人际交流与合作........................................... 12
3.3.4 提升学习效率，降低学习成本.................................................................12
四、原型图设计展示.......................................... 12
4.1 产品首页......................................... 12
4.1.1 图书馆............................................12
4.1.2 帖子............................................13
4.1.3 我的书架...........................................13
4.1.4 笔记...........................................14
4.1.5 社区...........................................15
4.2 文档交互页面..................................... 16
4.2.1AI 对话..........................................16
4.2.2 用户提问区...........................................17
4.2.3 用户评论区..........................................17
4.2.4 笔记区域........................................... 18
4
一、背景与思考
随着互联网知识平台的发展，人们获取知识的方式变得越来越多样化。目
前主流的知识平台主要有：
    搜索引擎：如谷歌、百度等，它们允许用户通过关键词搜索获取广泛的信
息。
    百科全书网站：如百度百科，提供大量经过整理的、关于各种主题的详细
信息。
    在线教育平台：如中国大学慕课，提供在线课程和专业认证。
    视频分享平台：如哔哩哔哩，上面有大量的教育频道和视频教程。
    社交媒体：如微博、小红书，用户可以关注内容创作者，获取实时信息。
    电子书籍和数字图书馆：如中国知网、各种数字图书馆等，提供大量电子
书籍和文献。
    问答网站：如知乎，用户可以提出问题并从其他用户或专家那里获得答案。
    在线协作工具：如Notion，允许用户协作和共享知识。
    专业博客和网站：如GitHub、CSDN 许多专家和机构维护自己的网站，分享
专业知识和见解。
    这些平台各有特点，满足了不同用户群体在不同场景下的知识获取需求。
    然而，这些知识平台对于用户的知识获取的体验并不是完美的。对于问答平台
知乎，问答的方式可以确保知识回答的精度，但也不可避免地产生了知识碎片
化的问题；对于视频知识平台，系列视频课程可以保证知识的体系性，但也存
在知识获取过程冗长拖沓的特点，这种知识获取方式与阅读文献是互补关系；
    而对于电子书籍与图书馆，虽然能保证知识的体系性与知识获取的快捷性，但
是一些书籍对于相关知识的留白又会增加初学者的学习难度，是不如视频课程
更加“新手友好”的。
    对于在校学生来说，读书依然是获取知识的主要方式，但是教材的质量往
往不能得到保证，教材不同章节内容的详略都会影响学习的难度。随着大模型
技术的发展，它们在辅助读书和学习方面展现出了巨大的潜力。因此我们希望
利用大模型技术来提高用户的读书学习体验，降低用户的“啃书”难度。同时
我们注意到了社区在知识生产方面的巨大潜力，而传统的知识社区都是基于问
5
答形式或博客形式，我们认为可以进一步创新，设计一个基于文档进行交互的
知识社区，让大模型和知识社区共同提升书籍、文档的易读性，为书籍赋予新
的生命力。除了对于知识内容的赋能，我们还注意到搭子文化的流行，搭子是
一种新兴的社交方式，这种文化的核心是通过共同的兴趣或需求来建立一种垂
直细分的精准陪伴关系。我们希望为搭子、社团、班级等集体构建一个交互协
作的平台，打造一个读书交友、社团知识库、课程班级知识管理的互动空间。
    二、产品设计思路
2.1 阅读辅助与学习管理
2.1.1 文档管理基础功能
功能：
    可以接收并解析文件内容，从PDF 中提取文本信息，识别PDF 中的页面布
局、标题、子标题、段落等结构元素。
    对于某一文档项目，用户可以上传其他的PDF 文档作为参考或引用文档，
    构建RAG（Retrieval- Augmented Generation）知识库，便于AI 进行信息检索
以提升内容拓展和知识问答的内容质量。
解析完成后，AI 可以对用户上传的文档进行翻译。
交互：
用户上传一篇主文档作为阅读文档，并可以为主文档选取若干篇参考文档
进行上传构建具有针对性的问答知识库。
用户可以在AI 对话框查看翻译结果。
涉及AI 能力：
AI 能够接收用户上传的文件，利用OCR 等技术，将PDF 中的图像数据转换
为可读文本，能够解析文件内容，提取文本信息。
AI 可以将用户上传的文档进行整合，构建一个针对性的问答知识库。
AI 翻译，利用大模型的翻译能力，提升翻译质量。
2.1.2 内容拓展与知识问答
功能：
用户在阅读过程中遇到不理解的概念或问题，可以通过AI 问答系统获得解
答，或链接到社区中的相关讨论。
6
交互：
用户在阅读界面上高亮或选择不理解的文本，AI 随即分析出用户的潜在提
问，并以选项的形式出现在AI 问答对话框区域。
用户可以通过点击问题或自己编辑问题，向AI 提出问题，AI 将尝试理解
问题并提供答案。用户可以指定AI 仅参考用户给出的参考文档而不超过其内容
范围以提高回答的可靠性。
用户可以选择向社区提问，问题会发布到社区，由社区成员回答。
AI 回答用户提出的问题，若回答内容有引用知识库或互联网的信息，标明
出处并显示跳转链接以便用户查看原始信息。
涉及AI 能力：
使用RAG 技术构建知识库进行信息检索，以提升回答内容的相关性和质量。
利用AI 的自然语言理解能力，解析用户的提问，理解其潜在的意图和上下
文。
2.1.3 文档互动
功能：
用户可以在文档内部进行提问，评论，高亮以及查看其他用户的创作等操
作。
交互：
用户可以选中文档内容，并显示高亮、提问、评论等选项。
文档的阅读界面有一个可显示或隐藏的侧栏，侧栏通过用户的控制可依次
显示AI 问答框、提问信息、评论信息、笔记子栏。
文档以页为单位收集用户的提问与评论信息。用户可以在侧栏查看本页的
提问与评论。对于每个问题与评论，有各自的回答区与回复区，每一回答也有
自己的评论区。
2.1.4 学习笔记
功能：
用户可以创建文档的学习笔记，并利用大模型和社区资源，更好的创建和
管理笔记。
交互：
用户可以在侧栏实现对笔记的编辑。
7
用户可以利用AI 一键为整个文档或选定的章节创建不同内容颗粒度的笔记，
可以一键生成笔记大纲，笔记大纲结构智能参考文档章节结构。
用户与AI 对话时，可以点选高质量的AI 回复，直接制作成为笔记卡片。
在AI 问答区域、回答区以及评论区，集成了一键添加到笔记的功能，用户
可以自由选取并添加到笔记的指定章节。
笔记可以调整位置、添加到收藏夹(用户创建)、编辑修改、设置样式。
涉及AI 能力：
大模型的语义理解能力，大模型需要对文档进行解析并对文档进行总结，
生成笔记。
2.2 知识社区
2.2.1 用户信息管理
功能：
注册并创建用户账户、编辑个人信息以及相关社交功能。
交互：
用户注册与登录：用户可以通过传统的用户名和密码或通过社交媒体账号
进行注册和登录。
用户档案创建与编辑：允许用户创建或修改个人档案，包括教育背景、专
业兴趣、学习目标等。
社交网络构建：通过好友和关注系统，允许用户建立联系，关注其他用户
动态，加入或创建学习小组。
个性化界面定制：提供界面布局和通知选项的个性化设置，以及隐私权限
管理。
行为跟踪：记录用户在平台上的活动，包括阅读的书籍、提问、回答和笔
记等，以便提供更个性化的服务。
好友和关注系统：允许用户关注其他用户或加入学习小组，建立好友关系，
形成个性化的社交网络。
涉及AI 能力：
用户画像构建：AI 分析用户的行为和偏好，构建用户画像，用于个性化推
荐。
2.2.2 内容管理
8
功能：
内容创作：用户可以撰写和发布自己的文章、笔记、帖子，分享知识和见
解。
内容推送：系统根据用户的个人兴趣、历史行为和社交网络互动，推送相
关和感兴趣的内容。
交互：
创作工具：提供用户友好的编辑器，支持文本格式化、图片插入和附件上
传，以便于内容创作。
发布流程：用户完成内容创作后，可以通过几步流程发布到社区，包括预
览、标签添加和发布选项。
内容互动：用户可以对感兴趣的内容进行点赞、评论和分享，与其他用户
进行互动。
推送通知：用户接收到个性化内容推送的通知，可以选择立即查看或稍后
阅读。
涉及AI 能力：
自然语言处理：用于理解和处理用户生成的内容，包括文本分析、情感分
析和主题识别。
推荐系统：AI 根据用户画像和行为数据，提供个性化的内容推荐。
内容审核：AI 自动审核用户发布的内容，确保符合社区规定和标准。
数据挖掘：AI 分析用户互动数据，发现热门话题和趋势，为内容推送提供
依据。
2.2.3 网络图书馆
功能：
电子书籍管理：允许用户上传、管理和阅读电子书籍，支持多种电子书格
式。
智能搜索与推荐：提供高效的搜索功能，帮助用户快速找到所需书籍或文
档，根据阅读历史和偏好推荐书籍。
在线阅读：对于epub 格式文档，支持字体大小调整、夜间模式等个性化阅
读设置。
交互：
9
上传与订阅：用户可以上传自己的电子书到平台，或订阅他人共享或平台
提供的书籍。
搜索与筛选：用户可以通过关键词、作者等条件筛选和搜索书籍。
阅读与评论：网络图书馆的阅读交互与2.1.3 节所描述内容相同。
2.2.4 读书小组与课程
功能：
读书小组旨在促进用户围绕共同的阅读兴趣建立社区，通过创建和管理小
组、参与讨论、跟踪阅读进度、组织活动和共享资源，增强学习体验和社交互
动。用户能够轻松加入或退出小组、参与讨论、更新阅读状态、报名活动以及
上传和下载资源，从而提升参与度和社区活跃度。
此功能可以应用于学校的班级或课程管理，例如高校内由开设某一门科目
的老师或上课同学创建一个小组，用户可以实现教材或课程资料的上传，同学
可以共享笔记或者共同创建并维护学习笔记，由管理员或AI 辅助选取内容优质
的笔记构成公共课程笔记，用户也可以维护自己的私有笔记。往届的课程信息
也可以被下届同学利用，可以加入版本控制功能服务于课程知识和资料的更新。
为引导用户使用该功能，我们将高校（也可以包括中小学）课程班级单设一个
模块，但交互上与读书小组差异较小。
交互：
小组创建与管理：允许用户创建或加入读书小组（或者课程，下同）
，管理
小组设置，包括小组名称、描述、成员资格等。
资源共享：小组成员可以共享阅读材料、笔记和相关资源。
小组讨论区：为每个小组提供一个讨论区，成员可以发起和参与与小组主
题相关的讨论。
小组聊天区：为小组成员提供聊天功能。
小组加入与退出：用户可以浏览和搜索小组，申请加入或退出小组。
讨论参与：用户可以在小组讨论区发表话题，回复其他成员的帖子。
文档交互：我们在小组内的资源阅读上保留上一个板块的文档AI 问答、评
论等交互。
涉及AI 能力：
推荐系统：AI 根据用户的阅读兴趣和活动参与情况，推荐相关的小组和活
10
动。
内容审核：AI 自动审核小组讨论内容和共享资源，确保符合社区规定和标
准。
社交网络分析：AI 分析小组成员之间的互动和联系，增强小组凝聚力和活
跃度。
三、创新点说明
3.1 产品创作理念
3.1.1 智能的AI 学习帮手
利用大模型技术，用户可以创建自己的知识库，让所读文档拥有真实的
“参考文献”。通过大模型的问答与解释功能，拓展书本内容，将书“读厚”；
通过大模型的总结与解析能力，生成大纲、阅读笔记，将书“读薄”。
3.1.2 基于文档的交互设计
常见的知识平台多采用问答的交互形式，知识零散化，而视频课程、教材
等成体系的知识又是冗长和新手不友好的。基于文档的交互形式可以解决问答
平台知识不够连贯的问题。当读者阅读每一页的时候，可以看到其他读者关于
每一段的提问与评论，这些他人的提问也可以引发读者的思考，读者可以选择
与其他读者进行互动，回答问题，也可以留下自己的评论。对于其他用户的回
答与评论，精彩之处还可以加入到自己笔记的对于章节，丰富了知识内容，增
加了互动性趣味性，也提升了学习效率。
3.1.3 富有开源精神的知识社区
我们希望优秀的大模型可以解决用户的所有疑问，但目前的技术而言，大
模型对于书籍深度的拓展是有限的，对于用户问题的回答也不是时时可以尽如
人意。目前，最好的模型也比不上相关领域的人类专家，因此我们增加知识社
区来让更多用户为书本内容做出贡献。在图书交互设计上，每本书籍就是一个
社区，社区的成员就是阅读该本书籍的人。在以小组为单位的知识社区里，用
户可以分享自己的笔记，也可以将他人的优质内容增加到自己的笔记当中，可
以将已有的笔记作为自己笔记的骨架进行增删，还可以与他人合作一起编辑公
共的笔记。在这里，每个人都可以是书籍的作者。
课程板块解决了高校内部课程资料、期末复习资料“口口相传”的困境，
11
打破了信息差，也可以让后人在课程上的选择与学习建立在前人的经验上，提
高了知识传递的质量，提升了学习效率，增加了同学的课程参与度。雁过留痕，
将互联网社区的开源精神发扬到各个学科中去。
3.1.4 以书会友，为书友提供互动平台
最近，一种名为“搭子”的新型社交方式在各大社交平台兴起。在高校的
校园墙等论坛，也经常见到寻找学习搭子的帖子。但学习、读书搭子的主要形
式多以陪伴学习为主，提供专注与自律方面的帮助，而在学习内容上很多时候
不能起到一加一大于二的效果。读书小组的功能提供了一个读书交互的平台，
让搭子之间可以分享资源，交换观点，问答互动。这样，书友们在阅读和学习
的旅程中可以相互学习，共同成长。
3.2 商业价值
3.2.1 解决痛点，满足市场需求
当前市场缺乏一个能够结合深度学习和社交互动的综合性知识平台。本产
品通过AI 辅助的文档管理和知识社区构建，解决了用户在知识获取、学习和交
流中的痛点，满足了市场对于高效学习工具的需求。
3.2.2 目标用户群体广泛
产品的目标用户包括但不限于在校学生、教育工作者、专业人士和终身学
习者。广泛的用户基础为产品的市场渗透和扩展提供了空间。
3.2.3 技术优势带来的竞争优势
利用前沿的大模型技术，产品在知识问答、知识库构建、笔记生成、文档
交互等方面展现出独特的技术优势。这些优势不仅提升了用户体验，也构筑了
产品的技术壁垒。
3.2.4 多元化的盈利模式
产品可以采用多种盈利模式，包括订阅服务、广告收入、内容付费和数据
服务等，为产品的可持续发展提供了经济支持。
3.2.5 创新性的产品功能
产品的创新点，如智能AI 学习帮手、基于文档的交互设计、知识社区以及
课程功能，均为创新之举，能够吸引用户的关注和兴趣。
3.3 社会贡献
12
3.3.1 促进知识共享与传播
通过构建开放的知识社区，产品鼓励用户分享自己的学习笔记和阅读心得，
促进了知识的共享与传播。这种开源精神有助于打破信息孤岛，提升整个社会
的知识水平。
3.3.2 支持教育公平
产品为不同背景的学习者提供了平等的学习机会。无论是在校学生还是职
场人士，都可以通过平台获取丰富的学习资源，提高自身的知识水平和竞争力，
从而支持教育公平。
3.3.3 增进人际交流与合作
读书小组等社交功能为用户之间的交流与合作提供了平台。用户可以通过
小组讨论、资源共享等形式，增进相互了解，建立合作关系，共同进步。
3.3.4 提升学习效率，降低学习成本
AI 辅助的文档管理和个性化推荐等功能，可以大幅提高用户的学习效率，
降低学习成本。用户可以更快地找到所需资源，更高效地完成学习任务。
3.3.5 促进教育创新
产品的创新性设计为教育领域带来了新的思路和方法。它鼓励教育工作者
利用新技术，探索新的教学模式，促进教育创新。
四、原型图设计展示
4.1 产品首页
4.1.1 图书馆
13
图4 - 1：主页图书馆页面
如图4 - 1 是首页的图书馆页面，顶栏是导航栏，还可以进行搜索，用户可
以搜索图书或帖子等信息。点击顶栏右侧对应图标可以跳转到用户信息，以及
创作中心和发帖。下栏是图书推荐以及分类，点击刷新可以换一批推荐书籍。
4.1.2 帖子
图4 - 2：首页帖子页面
如图4 - 2 所示是帖子页面，这里会呈现出用户所发的帖子，右侧有实时热
门帖子的搜索推荐。
4.1.3 我的书架
14
图4.3：首页我的书架页面
如图4 - 3 是我的书架，这里会呈现出用户所收藏的图书、文档，用户还可
以在这里上传自己的文档。用户可以切换默认排序和按进度排序，还可以在分
类选项创建收藏夹进行分级分类管理。
4.1.4 笔记
图4.4：首页笔记页面
如图4 - 4 是笔记页面，为了便于用户编辑和管理自己的笔记，我们在笔记
界面增加了丰富的功能。而笔记界面的功能是管理卡片，卡片就是笔记的内容
形式。此本界面应该按分类展示给用户其所有的卡片，同时保留卡片的添加、
15
修改、删除基本功能，也保留大模型赋能的讨论递进、卡片融合功能。为了方
便用户，因此添加两个辅助界面：展示所有卡片和AI 对话窗口。
左上角展示当前正在查看的文档，卡片窗口展示的是与该文档相关的笔记
卡片。左下角是树形文件结构，在这里可以切换笔记。
用户点击右侧卡片内部的相关按钮，可以对卡片进行基础操作，如编辑、
删除、收藏、调整样式等。用户点击卡片主体，可以选中单张 / 多张卡片，选中
的卡片样式改变，其标题会出现在右下方的窗口(称作collector)中，供用户
全局查看，选中卡片之后可以进行卡片操作。
点击卡片组合，弹出对话框，选择collector 中的一张卡片作为父卡片，
则将所有选择的卡片组合成卡片组(group)，从而进行卡片的关联，形成树型结
构。点击卡片融合、讨论递进，即跳转到AI 对话窗口，并将卡片的内容和相关
操作提示词输入给大模型，借助大模型的能力对卡片进行内容的管理升级。点
击自定义，弹出对话框，用户键入提示词，以借助大模型实现某项功能，之后
点击此按钮，直接将预设提示词和卡片内容输入给大模型，跳转到AI 对话窗口，
进行迭代。
4.1.5 社区
图4.5：首页社区页面
如图4 - 5 所示，社区模块分为小组和课程两个类型，这两类社区的成员组
织架构和交互并没有什么区别，但是我们将课程分离出来单独设立一个选项，
目的就是人为的将社区分类，并引导相关用户到课程板块建立自己的课程组织，
16
在课程内进行资源共享与交流。对于每个小组或课程，有相应的文档区，用于
资源共享；笔记区是社区成员公开的或社区成员公共编辑共同维护的笔记；讨
论区是社区成员发帖的空间，本页面呈现的样例就是这一区域；聊天区是成员
互动，发信息的区域；成员区可以查看组内成员信息，以及邀请成员，退群等
群组操作。
4.2 文档交互页面
如图4 - 6 所示，在主页，点击书本之后会进入到文档交互界面。界面左侧
是文档阅读区，用户可以阅读以及进行勾画文本等操作。顶栏左侧图标可以对
文档进行缩放以及全屏显示，方便阅读，中间的图标点击后可以显示目录。右
侧的侧栏是文档交互界面的核心功能，分别为AI 对话、用户提问区、用户评论
区以及笔记区域，下面将依次进行介绍。
4.2.1AI 对话
图4.6：文档交互页面AI 问答框
如图4 - 6 所示，在AI 对话栏，用户可以对AI 进行提问，用户可以选中文
档内容，同时AI 会自动识别文档信息并给出推荐问题，用户点击推荐问题直接
向AI 提问。在顶部有参考文档按钮，用户点击后可以为当前阅读的文档上传参
考文档，也可指定图书馆的线上资源进行参考，由此构建当前阅读文档的专属
RAG 知识库，让AI 的回答更有针对性。
AI 所回答的内容可以转化为笔记卡片，保存到笔记中去。
17
4.2.2 用户提问区
图4.7：文档交互页面用户提问区
如图4 - 7 所示，在用户提问区，用户可以搜索关于本文档的其他用户发布
的问题，也可以发布自己的提问。用户可以选择显示当前页面的提问或者整个
文档的提问。添加此功能的初心是，我们认为读者在读书的时候，了解其他人
的疑问可以引发自己的思考，加深对内容的理解。提问栏和评论区在逻辑上并
无区别，但是单列出提问选项可以起到强调和引导用户进行提问的作用，还可
以起到对内容分类的作用。
4.2.3 用户评论区
18
图4.8：文档交互页面用户评论区
如图4 - 8 所示，用户可以在此区域进行评论。
4.2.4 笔记区域
图4.9：文档交互页面笔记区
如图4 - 9 所示，笔记的载体是卡片，侧边栏笔记部分的作用就是收集卡片。
卡片来源有三：个人撰写卡片、社区他人卡片、AI 回答摘选卡片。个人卡片是
用户在阅读时产生的，包括知识摘要、提取总结、个人理解、心得体会等等，
社区卡片来自于同一文档的其他社区成员，用户可以选取优质卡片加入自己的
19
知识库，AI 卡片来自于用户和大模型的对话，优质的模型回答可以直接转化为
卡片加入知识库。
“我的卡片”为图4 - 9 所展示的页面，“社区卡片”为社区内的其他用户
为本文档创建的卡片，可以从“社区卡片”中选择高质量的卡片直接添加到
“我的卡片”中。
点击右下角加号，弹出对话框，撰写添加个人卡片；点击AI 界面大模型的
回复，将大模型的回复转化为AI 卡片。
点击卡片右上角收藏、编辑、更多按钮，可以实现对卡片的收藏、编辑和
更多操作。点击卡片右下角设置，可以设置卡片的样式，包括字体颜色、大小
等。
点击卡片整体，会选中卡片，同时右下角出现选中框，选中的卡片可以进
行顺序的调整。
选中单张 / 多张卡片，下方出现讨论递进按钮，点击后跳转到AI 对话界面，
并把卡片内容和递进的提示词输入给大模型；选中多张卡片，下方出现卡片融
合按钮，点击后跳转到AI 对话界面，并把卡片内容和融合的提示词输入给大模
型；提示词可以由开发人员撰写，也可以由用户自行上传。
`,
            cards: [
                {
                    cid: 1,
                    from: 'AI',
                    title: '标题',
                    content: '对于在校学生来说，读书依然是获取知识的主要方式，但是教材的质量往往不能得到保证，教材不同章节内容的详略都会影响学习的难度',
                },
                {
                    cid: 2,
                    from: 'User',
                    title: '标题2',
                    content: '对于在校学生来说，读书依然是获取知识的主要方式，但是教材的质量往往不能得到保证，教材不同章节内容的详略都会影响学习的难度',
                },
                {
                    cid: 3,
                    from: 'AI',
                    title: '标题3',
                    content: '对于在校学生来说，读书依然是获取知识的主要方式，但是教材的质量往往不能得到保证，教材不同章节内容的详略都会影响学习的难度',
                },
            ]

        }
    },
    mounted() {

    },
    methods: {
        uploadPdf() {
            this.$refs.pdfFileInput.click();
        },
        async trueUploadPdf(event) {
            const file = event.target.files[0];
            if (!file) {
                return;
            }

            if (file.type !== 'application/pdf') {
                alert('请选择PDF文件');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await axios.post('http://localhost:8000/api/uploadPdf', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                console.log('文件上传成功', response.data);
                this.pdfText = response.data["extracted_text"];

            } catch (error) {
                console.error('文件上传失败', error);
            }
        },
    }
}
</script>
  
<style scoped>
.library-container {
    height: 90vh;
    width: 100vw;
}

.library-head {}

.library-body {
    height: 90vh;
    display: flex;
}

.pdf-viewer-bgc {
    width: 60vw;
    height: 90vh;
    background-color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdf-viewer {
    width: 80%;
    max-width: 100%;
    max-height: 100%;
    background-color: white;
    word-break: break-all;
    text-indent: 2em;
    overflow-y: auto;
    padding: 2em;
    box-sizing: border-box;
    transition: 0.5s ease;
    white-space: pre-wrap;
    font-size: 1.5em;
}

.pdf-tools {
    width: 40vw;
    height: 100%;
}

.pdf-uploader {
    width: 40vw;
    height: 100%;
    font-size: 8em;
}

.tools-up {
    height: 10vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tools-up-mycards,
.tools-up-othercards {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5em;
    font-weight: bolder;
    cursor: pointer;
    border-bottom: 4px solid rgb(217, 236, 245);
    border-right: 4px solid rgb(217, 236, 245);
    transition: .6s ease;

    &:hover {
        background-color: #d9f5fa;
    }
}


.tools-up-mycards {
    background-color: rgb(217, 236, 245);
}

.tools-up-mycards button,
.tools-up-othercards button {
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: inherit;
}

.tools-chat {
    height: 70vh;
    width: 100%;
    overflow-y: auto;
}

.tools-down {
    height: 10vh;
    width: 100%;
    display: flex;
}

.tools-down-input {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    max-width: 600px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.rounded-input {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #87cefa;
    border-radius: 25px 0 0 25px;
    outline: none;
    transition: border 0.3s ease;
}

.rounded-input:focus {
    border-color: #87cefa;
}

.rounded-button {
    width: 20%;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #87cefa;
    border-radius: 0 25px 25px 0;
    background-color: #87cefa;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.rounded-button:hover {
    background-color: #87cefa;
}

.tools-down-other {
    height: 100%;
    width: 20%;
}

.other-button {
    width: 80px;
    height: 80px;
    padding: 15px;
    font-size: 1em;
    margin-left: 1vw;
    border: 2px solid #87cefa;
    border-radius: 50%;
    background-color: #87cefa;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
</style>
